<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>烘焙网-首页</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    body{
      margin: 0;
    }
    html {
      overflow: scroll;
      scroll-behavior: smooth
    }

    body {
      margin: 0;
    }

    .el-menu-demo.el-menu--horizontal.el-menu {
      border: none;
    }

    .el-menu-item {
      padding: 0;
    }

    /*menu中的a标签*/
    .my-menu-a {
      text-decoration: none;
      display: block;
      width: 70px;
      height: 60px;
      text-align: center;
    }

    /*弹出栏的样式*/
    .el-popover.el-popper {
      background: rgba(255, 255, 255, .95);
      border: none;
      border-radius: 15px;
      box-shadow: none;
    }

    .el-input__inner {
      border: none;
      outline: none;
      box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1);
    }

    .hoverable {
      transition-duration: .1s;
    }

    .hoverable:hover {
      transform: scale(1.1);
      transition-duration: .2s;
      filter: brightness(1.1);
    }

    .hoverable:active {
      transform: scale(.8);
      transition-duration: .05s;
    }

    .el-button {
      color: black;
      background: transparent;

      border: none;
      border-radius: 15px;
    }

    .el-button:hover {
      color: orange;
      background: transparent;

      box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1);
    }

    .el-button:focus, .el-button:active {
      color: orange;
      background: transparent;

      box-shadow: none;
    }


    #mn-recipe-row .el-card__body, #mn-mv-row .el-card__body, #mn-info-row .el-card__body {
      padding: 0;
    }

    .t {
      text-decoration: none;
      color: orange;
    }

    .block-row {
      margin: 25px 0 0 0;
    }


    #hd-topCaro-div {
      transition-duration: .1s;
      filter: brightness(90%);
    }

    #hd-topCaro-div:hover {
      transition-duration: .2s;
      transform: scale(1.02);
      filter: brightness(100%);
    }


    .anchor-a {
      display: block;
      margin: 15px auto;
      width: 100%;
      height: 100px;
    }

    #ft-top-div p {
      font-size: 16px;
      line-height: 30px;
      color: #676b6f;
      margin: 5px 0;
    }

    #ft-top-div a {
      font-size: 14px;
      line-height: 20px;
      text-decoration: none;
      color: #676b6f;
      display: block;
      margin: 5px 0;
    }

    #ft-top-div h3 {
      color: white
    }

    #ft-mid-div a {
      font-size: 14px;
      line-height: 20px;
      text-decoration: none;
      margin: 0 5px;
      color: #424649;
    }

    .verticalDivision {
      content: '';
      display: block;
      height: 216px;
      width: 0;
      margin: 0 auto;
      border-right: 1px solid;
      border-color: #25282a;
      box-shadow: 1px 0 1px #393c40;
    }
    #background {
      width: 100% !important;
      height: 500px;
      background-image: url("../imgs/denglubg.gif");
      background-size: cover;
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: center;
      margin: 0 auto;
      overflow: hidden;
    }
    [v-clock]{display: none}
  </style>
</head>

<body >
<div id="app" v-clock>
  <el-container>
    <el-header id="el-hd" height="100px"
               style="width: 100%;
                   padding: 15px 0;

                   background:white">
      <!--主导航栏开始-->
      <el-row id="hd-topBar-row" gutter="20" type="flex" justify="space-between"
              style="width: 1200px;height: 70px;margin: 0 auto">
        <!--图标开始-->
        <el-col span="4">
          <img src="../imgs/icon/icon01.png" alt="icon.png" style="height: 100%">
        </el-col>
        <!--图标结束-->

        <!--导航开始-->
        <el-col span="8">
          <el-menu :default-active="hdTopNavActiveIndex" class="el-menu-demo"
                   mode="horizontal"
                   @select="hdNavHandleSelect"
                   active-text-color="orange">
            <el-menu-item :index="i+1" v-for="(item,i) in hdTopMenuArr">
              <a :href="item.url" class="my-menu-a hoverable">
                {{item.name}}</a>
            </el-menu-item>
          </el-menu>
        </el-col>
        <!--导航结束-->

        <!--涉及领域开始-->
        <el-col span="4">
          <el-popover
                  placement="bottom"
                  width="160"
                  trigger="click"
                  style="z-index: 3;">
            <div v-for="item in topTopFastNavArr">
              <el-popover
                      placement="left"
                      width="670"
                      trigger="hover"
                      close-delay="50">
                <h2 style="margin: 20px">快速导航</h2>
                <el-row gutter="10">
                  <el-col span="6" v-for="nav in item.nav">
                    <el-card class="hoverable"
                             style="background:rgba(255,255,255,.7);border: none">
                      <p style="font-size: 16px;font-weight: bold">{{nav.name}}</p>
                      <p style="font-size: 12px">{{nav.info}}</p>
                    </el-card>
                  </el-col>
                </el-row>
                <h2 style="margin: 20px">热门岗位</h2>
                <el-row gutter="10">
                  <el-col span="4" v-for="j in item.job">
                    <el-card class="hoverable"
                             style="background:rgba(255,255,255,.7);border: none">
                      <p style="font-size: 12px">{{j}}</p>
                    </el-card>
                  </el-col>
                </el-row>
                <p class="hoverable" slot="reference"
                   style="font-size: 20px;font-weight: lighter;text-align: center;
                                       margin: 25px auto">
                  {{item.text}}
                </p>
              </el-popover>
            </div>
            <p class="hoverable t" slot="reference"
               style="font-size: 20px;font-weight: lighter;text-align: center">
              涉及领域
            </p>
          </el-popover>
        </el-col>
        <!--涉及领域结束-->

        <!--搜索栏开始-->
        <el-col span="6">
          <el-input style="margin: 15px 0;"
                    placeholder="请输入要搜索的内容"
                    suffix-icon="el-icon-search"
                    v-model="search_text">
          </el-input>
        </el-col>
        <!--搜索栏结束-->

        <!--登录注册图标开始-->
        <el-col span="2">
          <el-popover placement="top" title="欢迎来到烘焙网!" width=50px trigger="hover">
            <el-row>
              <el-col span="12">
                <el-button class="hoverable" type="info">注册</el-button>
              </el-col>
              <el-col span="12">
                <el-button class="hoverable" type="success">登录</el-button>
              </el-col>
            </el-row>

            <div class="hoverable" slot="reference"
                 style="height:100%;width:100%;margin: 0 auto;font-size: 25px;line-height: 25px;display: table">
              <i class="el-icon-user"
                 style="display: table-cell;text-align: center;vertical-align: middle"></i>
            </div>
          </el-popover>
        </el-col>
        <!--登录注册图标结束-->
      </el-row>
      <!--主导航栏结束-->
    </el-header>
    <el-main id="el-main" style="height: auto;width: 100%;background:#f1f2f3;">
        <el-row>
          <el-col span="12" style="text-align: center;margin: 0 auto">
            <el-card style="height: 525px">
              <img src="../imgs/zhuce.png">
            </el-card>
          </el-col>
          <el-col span="12">
            <el-form label-width="100px" style="position: relative;top: 20px;margin: 0 auto">
              <el-form-item>
                <h4 style="font-size: 28px;float: left;margin-top: 10px">
                  立即注册</h4>
                <a href="login.html"
                   style="float: right;margin-top: 20px ">
                  已有帐号？现在登录
                </a>
              </el-form-item>
              <el-form-item style="width: 600px">
                <el-input type="text"
                          placeholder="请输入用户名"
                          ></el-input>
              </el-form-item>
              <el-form-item style="width: 600px">
                <el-input type="password"
                          placeholder="请输入密码"
                          ></el-input>
              </el-form-item>
              <el-form-item style="width: 600px">
                <el-input type="password"
                          placeholder="请确认密码"
                          ></el-input>
              </el-form-item>
              <el-form-item style="width: 600px">
                <el-input type="text"
                          placeholder="Email"
                          ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button style="display: inline-block;
                                width: 200px;margin:0 auto"
                           type="primary"
                           >
                  <a href="javascript:void(0)">提交</a>
                </el-button>
              </el-form-item>
              <el-form-item>
                快捷登录:
                <el-popover
                        placement="top-start"
                        width="300"
                        trigger="click">
                  <el-form style="">
                    <el-form-item
                            style="color: blue;
                                                font-weight: bold;">
                      微信账号登录
                    </el-form-item>
                    <el-form-item
                            style="color: blue;
                                                font-weight: bold;
                                                margin-left: 20px">
                      <img src="../imgs/vx.png">
                    </el-form-item>
                    <el-form-item
                            style="color: #676b6f;
                                        text-align: center;">
                      请使用二维码登录
                    </el-form-item>
                  </el-form>
                  <img src="../imgs/vx01.png" slot="reference"
                       style="vertical-align: middle;margin-left: 10px">
                </el-popover>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

    </el-main>
    <el-footer id="el-ft" style="height: fit-content;width: 100%;">
      <!--footer开始-->
      <div id="ft-top-div" style="width: 100%;height: 220px;background:#2f3234;padding: 40px 0">
        <div style="width: 1200px;margin: 15px auto">
          <el-row type="flex" justify="space-between">
            <el-col span="5" style="height: 100%">
              <div style="margin: 0 auto">
                <img src="../imgs/icon/icon01.png" alt="iconImg" style="filter: grayscale(100%)">
                <p>教程灵感就看烘焙馆</p>
                <p>烘焙行业网络社区平台</p>
                <p>全国百城上千个职位等你来</p>
              </div>
            </el-col>
            <el-col span="3" style="height: 100%">
              <div class="verticalDivision"></div>
            </el-col>
            <el-col span="2" style="height: 100%">
              <h3>关于我们</h3>
              <a v-for="item in ftTopItems[0]"
                 class="hoverable" :href="item.url">
                {{item.text}}
              </a>
            </el-col>
            <el-col span="2" style="height: 100%">
              <h3>支持与服务</h3>
              <a v-for="item in ftTopItems[1]"
                 class="hoverable" :href="item.url">
                {{item.text}}
              </a>
            </el-col>
            <el-col span="2" style="height: 100%">
              <h3>底部导航</h3>
              <a v-for="item in ftTopItems[2]"
                 class="hoverable" :href="item.url">
                {{item.text}}
              </a>
            </el-col>
            <el-col span="3" style="height: 100%">
              <div class="verticalDivision"></div>
            </el-col>
            <el-col span="5" style="height: 100%">
              <el-row style="margin: 15px auto">
                <el-col span="8" v-for="item in ftIconArr">
                  <el-popover
                          placement="top"
                          width="100%"
                          trigger="hover">
                    <el-row>
                      <el-col span="12">
                        <img :src="item.QRCard" alt="QRCard" height="120px">
                      </el-col>
                      <el-col span="12">
                        <p>{{item.info1}}</p>
                        <p :style="'color: '+item.color">{{item.info2}}</p>
                      </el-col>
                    </el-row>
                    <el-button slot="reference" class="hoverable"
                               style="background:none;border: none;padding:0">
                      <img :src="item.url" alt="iconImg" height="35px"
                           style="display: block;margin: 0 auto">
                      <p style="text-align: center">{{item.text}}</p>
                    </el-button>
                  </el-popover>

                </el-col>
              </el-row>
              <div style="margin: 0 auto;width: fit-content">
                <span style="font-size: 54px;color: rgb(255,115,0)">烘焙</span>
                <span style="font-size: 54px;color: #676b6f;font-style: normal">馆</span>
                <p>烘焙行业网络社区平台</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div id="ft-mid-div" style="width: 100%;height: 23px;background:#2c2f31;padding: 13px 0">
        <div style="width: 1200px;margin: 0 auto">
          <span style="font-size: 16px;line-height: 30px;color: #676b6f;margin: 5px 0;">友情链接:</span>
          <a v-for="item in ftMidItems"
             class="hoverable" :href="item.url" style="display: inline-block">
            {{item.text}}
          </a>
        </div>
      </div>
      <div style="width: 100%;height: 23px;background:#292929;padding: 13px 0">
        <div style="width: 1200px;margin: 0 auto">
          <p style="color: #aaa;text-align: center;font-size: 14px;line-height: 30px;margin: 0 auto">
            Copyright ©2018-2020 烘焙舘Powered by©Discuz!技术支持：烘焙馆 ( 赣ICP备19004781号-4 )
          </p>
        </div>
      </div>
      <!--footer结束-->
    </el-footer>
  </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  //
  function randInt(start, end) {
    if (end < start)
      throw Error
    let raw_rand = Math.random()
    let span = end - start
    return Math.round(start + raw_rand * span)
  }

  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        hdTopNavActiveIndex: 1,
        hdTopMenuArr: [
          {name: '首页', url: 'index.html'},
          {name: '食谱', url: 'recipeList.html'},
          {name: '视频', url: 'videoList.html'},
          {name: '资讯', url: 'infoList.html'},
          {name: '招聘', url: 'recruit.html'},
        ],
        search_text: '',
        carousel_item: [
          {url: '../imgs/hd/首页header轮播图01.png', bgc: '#93d3dd'},
          {url: '../imgs/hd/首页header轮播图02.png', bgc: '#afedf8'},
          {url: '../imgs/hd/首页header轮播图03.png', bgc: '#670fed'},],
        topTopFastNavArr: [
          {
            text: '烘焙类',
            nav: [{name: '烘焙师', info: '前端必学神器'},
              {name: '烘焙中工', info: '烘焙中工'},
              {name: '烘焙学徒', info: '热门html5教程'},
              {name: '烘焙全能师', info: '零基础知识树'}],
            job: ['面包师', '西点师', '烘焙主管', '产品研发', '面包主管', '常温蛋糕师']
          },
          {
            text: '裱花类',
            nav: [{name: '烘焙师', info: '前端必学神器'},
              {name: '烘焙中工', info: '烘焙中工'},
              {name: '烘焙学徒', info: '热门html5教程'},
              {name: '烘焙全能师', info: '零基础知识树'}],
            job: ['面包师', '西点师', '烘焙主管', '产品研发', '面包主管', '常温蛋糕师']
          },
          {
            text: '艺术造型类',
            nav: [{name: '全部教程', info: '前端必学神器'},
              {name: '最新教程', info: '最新Drupal教程'},
              {name: '热门推荐', info: '热门Drupal教程'},
              {name: '新手入门', info: '零基础知识树'}],
            job: ['AI插画', 'MG动画', '动态特效', '动态建模', 'logo设计', '虚拟写实']
          },
          {
            text: '生产管理类',
            nav: [{name: '全部教程', info: '前端必学神器'},
              {name: '最新教程', info: '最新Drupal教程'},
              {name: '热门推荐', info: '热门Drupal教程'},
              {name: '新手入门', info: '零基础知识树'}],
            job: ['AI插画', 'MG动画', '动态特效', '动态建模', 'logo设计', '虚拟写实']
          },
          {
            text: '门店运营类',
            nav: [{name: '全部教程', info: '前端必学神器'},
              {name: '最新教程', info: '最新Drupal教程'},
              {name: '热门推荐', info: '热门Drupal教程'},
              {name: '新手入门', info: '零基础知识树'}],
            job: ['AI插画', 'MG动画', '动态特效', '动态建模', 'logo设计', '虚拟写实']
          },
          {
            text: '咖啡饮品类',
            nav: [{name: '全部教程', info: '前端必学神器'},
              {name: '最新教程', info: '最新Drupal教程'},
              {name: '热门推荐', info: '热门Drupal教程'},
              {name: '新手入门', info: '零基础知识树'}],
            job: ['AI插画', 'MG动画', '动态特效', '动态建模', 'logo设计', '虚拟写实']
          },
          {
            text: '区域销售类',
            nav: [{name: '全部教程', info: '前端必学神器'},
              {name: '最新教程', info: '最新Drupal教程'},
              {name: '热门推荐', info: '热门Drupal教程'},
              {name: '新手入门', info: '零基础知识树'}],
            job: ['AI插画', 'MG动画', '动态特效', '动态建模', 'logo设计', '虚拟写实']
          },],
        hdBottomMenuArr: [
          {name: '分类信息', info: '免费快速发布行业信息'},
          {name: '烘焙商圈', info: '专业烘焙行业商家推广平台'},
          {name: '求职招聘', info: '专属烘焙行业求职招聘平台'},
          {name: '烘焙学院', info: '精选线上课程免费在线看'},
        ],

        mnRecipeActiveIndex: 1,
        mnRecipeNavArr: [
          {name: '全部'},
          {name: '面包'},
          {name: '小食'}
        ],
        mnRecipeCardArr: [[
          {url: '../imgs/mn/recipe/01.jpg', text: '入口即酥的超浓花生酱酥饼', type: '饼干'},
          {url: '../imgs/mn/recipe/02.jpg', text: '枣泥花式面包，好吃到爆', type: '面包'},
          {url: '../imgs/mn/recipe/03.jpg', text: '中种淡奶油吐司,送朋友超有面子', type: '面包'},
          {url: '../imgs/mn/recipe/04.png', text: '开放式三明治,一份小清新快手早餐', type: '面包'},
          {url: '../imgs/mn/recipe/05.jpg', text: '心形火龙果椰蓉面包,任谁都抗拒不了', type: '面包'},
          {url: '../imgs/mn/recipe/06.jpg', text: '酥脆培根吐司芝士卷，人见人爱', type: '面包'},
          {url: '../imgs/mn/recipe/07.jpg', text: '红酒芝士面包,小小的梭子红酒芝士', type: '面包'},
          {url: '../imgs/mn/recipe/08.jpg', text: '爆浆抹茶甜甜圈面包，自带幸福感的小甜甜', type: '面包'},
          {url: '../imgs/mn/recipe/09.jpg', text: '核桃葡萄干软欧：蔓越莓种面', type: '面包'},
          {url: '../imgs/mn/recipe/10.jpg', text: '芒果酸奶条，绝对值得一试！', type: '小食'},
          {url: '../imgs/mn/recipe/11.jpg', text: '爱乐甜零卡糖版网红烤牛奶，香甜软嫩Q弹', type: '小食'},
          {url: '../imgs/mn/recipe/12.jpg', text: '蔓越莓绿豆糕，味道还不错值得一试!', type: '小食'},
          {url: '../imgs/mn/recipe/13.png', text: '巧克力纸杯蛋糕，百分百成功超好吃', type: '小食'},
          {url: '../imgs/mn/recipe/14.png', text: '今日甜品·Q弹浓郁的网红烤奶块', type: '小食'}], [
          {url: '../imgs/mn/recipe/02.jpg', text: '枣泥花式面包，好吃到爆', type: '面包'},
          {url: '../imgs/mn/recipe/03.jpg', text: '中种淡奶油吐司,送朋友超有面子', type: '面包'},
          {url: '../imgs/mn/recipe/04.png', text: '开放式三明治,一份小清新快手早餐', type: '面包'},
          {url: '../imgs/mn/recipe/05.jpg', text: '心形火龙果椰蓉面包,任谁都抗拒不了', type: '面包'},
          {url: '../imgs/mn/recipe/06.jpg', text: '酥脆培根吐司芝士卷，人见人爱', type: '面包'},
          {url: '../imgs/mn/recipe/07.jpg', text: '红酒芝士面包,小小的梭子红酒芝士', type: '面包'},
          {url: '../imgs/mn/recipe/08.jpg', text: '爆浆抹茶甜甜圈面包，自带幸福感的小甜甜', type: '面包'},
          {url: '../imgs/mn/recipe/09.jpg', text: '核桃葡萄干软欧：蔓越莓种面', type: '面包'}], [
          {url: '../imgs/mn/recipe/01.jpg', text: '入口即酥的超浓花生酱酥饼', type: '饼干'},
          {url: '../imgs/mn/recipe/10.jpg', text: '芒果酸奶条，绝对值得一试！', type: '小食'},
          {url: '../imgs/mn/recipe/11.jpg', text: '爱乐甜零卡糖版网红烤牛奶，香甜软嫩Q弹', type: '小食'},
          {url: '../imgs/mn/recipe/12.jpg', text: '蔓越莓绿豆糕，味道还不错值得一试!', type: '小食'},
          {url: '../imgs/mn/recipe/13.png', text: '巧克力纸杯蛋糕，百分百成功超好吃', type: '小食'},
          {url: '../imgs/mn/recipe/14.png', text: '今日甜品·Q弹浓郁的网红烤奶块', type: '小食'}]],

        mnMvActiveIndex: 1,
        mnMvNavArr: [
          {name: '全部'},
          {name: '烘焙教学'},
          {name: '美食欣赏'},
          {name: '相关看点'},
        ],
        mnMvCardArr: [
          [
            {
              url: '../imgs/mn/mv/1.png',
              type: '美食欣赏',
              text: '这样做彩虹果冻太惊艳了！在废弃的饼干盒里就能做，好...'
            },
            {
              url: '../imgs/mn/mv/2.png',
              type: '烘焙教学',
              text: '入门级烘焙小零食，玛格丽特饼干，制作简单容易存放'
            },
            {
              url: '../imgs/mn/mv/3.png',
              type: '烘焙教学',
              text: '不用面粉不用烤箱，也能做出像模像样的披萨，拥有芝士...'
            },
            {
              url: '../imgs/mn/mv/4.png', type: '美食欣赏',
              text: '会做马卡龙的烘焙师才是好甜品师'
            },
            {
              url: '../imgs/mn/mv/5.png', type: '美食欣赏',
              text: '想吃五彩琥珀糖不用买，教你在家就能做！'
            },
            {
              url: '../imgs/mn/mv/6.png',
              type: '美食欣赏',
              text: '差点以为它是漂亮的芭比娃娃，原来是牛人做的翻糖蛋糕'
            },
            {
              url: '../imgs/mn/mv/7.png', type: '烘焙教学',
              text: '电饭锅烘焙之速溶锅芝士蛋糕'
            },
            {
              url: '../imgs/mn/mv/8.png', type: '烘焙教学',
              text: '今天教你一款豆沙吐司，做法简单！'
            },
            {
              url: '../imgs/mn/mv/9.png',
              type: '烘焙教学',
              text: '松软又Q弹的糯米小蛋糕升级啦，加了芝士和肉松口感更丰富'
            },
            {
              url: '../imgs/mn/mv/10.png', type: '美食欣赏',
              text: '这才是真正的天才烘焙师不服不行'
            },
            {
              url: '../imgs/mn/mv/11.png', type: '烘焙教学',
              text: '日本芝士蛋糕美味的烘焙配方工艺教程'
            },
            {
              url: '../imgs/mn/mv/12.png',
              type: '美食欣赏',
              text: '手工鮮奶吐司面包，最好吃的做法，松软可口，一学就会！'
            },
            {
              url: '../imgs/mn/mv/13.jpg', type: '烘焙教学',
              text: '家庭烘焙和专业烘焙区别在哪里'
            },
            {
              url: '../imgs/mn/mv/14.jpg', type: '烘焙教学',
              text: '蛋糕面糊温度计算公式（面糊类）'
            },
            {
              url: '../imgs/mn/mv/15.png',
              type: '相关看点',
              text: '找烘焙包装就到2022PKWE8月3日-5日在义乌国际博览中心等您！'
            },
            {
              url: '../imgs/mn/mv/16.png', type: '相关看点',
              text: '2022烘焙糕点及包装趋势看2022上海包装展'
            }],
          [
            {
              url: '../imgs/mn/mv/2.png',
              type: '烘焙教学',
              text: '入门级烘焙小零食，玛格丽特饼干，制作简单容易存放'
            },
            {
              url: '../imgs/mn/mv/3.png',
              type: '烘焙教学',
              text: '不用面粉不用烤箱，也能做出像模像样的披萨，拥有芝士...'
            },
            {
              url: '../imgs/mn/mv/7.png', type: '烘焙教学',
              text: '电饭锅烘焙之速溶锅芝士蛋糕'
            },
            {
              url: '../imgs/mn/mv/8.png', type: '烘焙教学',
              text: '今天教你一款豆沙吐司，做法简单！'
            },
            {
              url: '../imgs/mn/mv/9.png',
              type: '烘焙教学',
              text: '松软又Q弹的糯米小蛋糕升级啦，加了芝士和肉松口感更丰富'
            },
            {
              url: '../imgs/mn/mv/11.png', type: '烘焙教学',
              text: '日本芝士蛋糕美味的烘焙配方工艺教程'
            },
            {
              url: '../imgs/mn/mv/13.jpg', type: '烘焙教学',
              text: '家庭烘焙和专业烘焙区别在哪里'
            },
            {
              url: '../imgs/mn/mv/14.jpg', type: '烘焙教学',
              text: '蛋糕面糊温度计算公式（面糊类）'
            }],
          [
            {
              url: '../imgs/mn/mv/1.png',
              type: '美食欣赏',
              text: '这样做彩虹果冻太惊艳了！在废弃的饼干盒里就能做，好...'
            },
            {
              url: '../imgs/mn/mv/4.png', type: '美食欣赏',
              text: '会做马卡龙的烘焙师才是好甜品师'
            },
            {
              url: '../imgs/mn/mv/5.png', type: '美食欣赏',
              text: '想吃五彩琥珀糖不用买，教你在家就能做！'
            },
            {
              url: '../imgs/mn/mv/6.png',
              type: '美食欣赏',
              text: '差点以为它是漂亮的芭比娃娃，原来是牛人做的翻糖蛋糕'
            },
            {
              url: '../imgs/mn/mv/10.png', type: '美食欣赏',
              text: '这才是真正的天才烘焙师不服不行'
            },
            {
              url: '../imgs/mn/mv/12.png',
              type: '美食欣赏',
              text: '手工鮮奶吐司面包，最好吃的做法，松软可口，一学就会！'
            }],
          [
            {
              url: '../imgs/mn/mv/15.png',
              type: '相关看点',
              text: '找烘焙包装就到2022PKWE8月3日-5日在义乌国际博览中心等您！'
            },
            {
              url: '../imgs/mn/mv/16.png',
              type: '相关看点',
              text: '2022烘焙糕点及包装趋势看2022上海包装展'
            }]
        ],


        mnInfoActiveIndex: 1,
        mnInfoNavArr: [
          {name: '全部'},
          {name: '面包'},
          {name: '小食'}
        ],
        mnInfoCardArr: [
          {
            url: '../imgs/mn/info/01.jpg',
            title: '成都一蛋糕店遭恶意退单，一查竟是同行干的！对方回应：攻击错对象 ...',
            abstract: "订单下了之后，估摸着蛋糕快做完时就点退款，这种情况持续了一周。”在刚刚过去的一周，王先生位于成都市武侯" +
                    "区晋阳路的蛋糕店遇到了一件蹊跷的事儿，外卖平台上的订单在下单后不断被退单，共遇到四五十单，导 ...",
            view: randInt(500, 5000),
            comment: randInt(20, 200)
          }, {
            url: '../imgs/mn/info/02.jpg',
            title: '烘焙行业越来越难做了？并不是！ ...',
            abstract: "总有人抱怨说烘焙行业越来越难做了，其实主要还是经营策略和方法问题。我们拿生日蛋糕举例，尤其是水果蛋糕，" +
                    "有个十分大的难题，就是说制作次数太低。大部分人一年只过一次生日，每一家中历年消費不上几回。但针 ...",
            view: randInt(500, 5000),
            comment: randInt(20, 200)
          }, {
            url: '../imgs/mn/info/03.png',
            title: '济南一知名品牌面包连锁店，多家门店关门，很多人充值卡还没消费 ...',
            abstract: "近期，进驻济南多年的面包新语品牌连锁店已悄然关门，一时间让不少充值该店储值卡的消费者找不到消费门店，甚" +
                    "至面临退卡无门的窘境。18日，记者联系到面包新语品牌官方一工作人员。她表示，目前仅是暂时关掉多 ...",
            view: randInt(500, 5000),
            comment: randInt(20, 200)
          }, {
            url: '../imgs/mn/info/04.jpg',
            title: '85度C又出事了，饮品里喝出“订书针”，店员的一波操作让女子直接曝 ...',
            abstract: "据海峡消费报报道，福州一3岁小孩在85度C奶茶里喝出订书钉，卖家否认来源。近日，福州的郑女士在85度C门店里" +
                    "购买了一款名叫爆粒葡萄的饮品进行外带。在食用过程中，3岁的儿子从葡萄粒中吃出了一颗订书钉。幸运 ...",
            view: randInt(500, 5000),
            comment: randInt(20, 200)
          },
        ],

        mnRecruitNavActiveIndex: 1,
        mnRecruitTabArr: [
          {
            arr: [
              {
                url: '../imgs/mn/recruit/job/01.jpg', name: '高级烘焙师', title: '10000元以上',
                info1: '浙江省-嘉兴市', info2: '五芳斋实业', view: randInt(100, 50000)
              },
              {
                url: '../imgs/mn/recruit/job/02.jpg', name: '烘焙主管', title: '7000-9000元',
                info1: '山东省-临沂市', info2: '妙角仕食品', view: randInt(100, 50000)
              },
              {
                url: '../imgs/mn/recruit/job/03.jpg', name: '烘焙全能师', title: '7000-9000元',
                info1: '湖南省-永州市', info2: '一炉麦色食品', view: randInt(100, 50000)
              },
              {
                url: '../imgs/mn/recruit/job/04.jpg', name: '高级裱花师', title: '5000-7000元',
                info1: '贵州省-贵阳市', info2: '贵重合力食品', view: randInt(100, 50000)
              },
              {
                url: '../imgs/mn/recruit/job/05.jpg', name: '烘培中工', title: '4000-5000元',
                info1: '江西省-南昌市', info2: '品华居食品', view: randInt(100, 50000)
              }], label: ['Logo', '岗位名', '薪资', '地址', '公司名']
          }, {
            arr: [
              {
                url: '../imgs/mn/recruit/man/01.jpg',
                name: '赵雪彦',
                title: '12000-20000',
                info1: '8年以上',
                info2: '技术总监',
                view: randInt(100, 50000)
              },
              {
                url: '../imgs/mn/recruit/man/02.jpg',
                name: '周周小',
                title: '8000-10000',
                info1: '5年-8年',
                info2: '面包主管,烘焙主管',
                view: randInt(100, 50000)
              },
              {
                url: '../imgs/mn/recruit/man/03.jpg',
                name: '肖三元',
                title: '8000-10000',
                info1: '8年以上',
                info2: '烘焙全能师',
                view: randInt(100, 50000)
              },
              {
                url: '../imgs/mn/recruit/man/04.jpg',
                name: '程小方',
                title: '5000-8000',
                info1: '5年-8年',
                info2: '烘焙师,面包师',
                view: randInt(100, 50000)
              },
              {
                url: '../imgs/mn/recruit/man/05.jpg',
                name: '姚德强',
                title: '4000-5000',
                info1: '5年-8年',
                info2: '裱花师',
                view: randInt(100, 50000)
              }], label: ['头像', '姓名', '预期薪资', '工作经验', '期望职位']
          }, {
            arr: [
              {
                url: '../imgs/mn/recruit/comp/01.png',
                name: '郑州丰客餐饮管理有限公司',
                title: randInt(1, 5),
                info1: '河南省-郑州市',
                info2: '公司',
                view: randInt(100, 50000)
              },
              {
                url: '../imgs/mn/recruit/comp/02.png',
                name: '浙江五芳斋实业股份有限公司',
                title: randInt(1, 5),
                info1: '浙江省-嘉兴市',
                info2: '公司',
                view: randInt(100, 50000)
              },
              {
                url: '../imgs/mn/recruit/comp/03.png',
                name: '靖江市法麦美辰面包店',
                title: randInt(1, 5),
                info1: '江苏省-泰州市',
                info2: '门店',
                view: randInt(100, 50000)
              },
              {
                url: '../imgs/mn/recruit/comp/04.jpg',
                name: '余干鲜之语食品有限公司',
                title: randInt(1, 5),
                info1: '江西省-上饶市',
                info2: '公司',
                view: randInt(100, 50000)
              },
              {
                url: '../imgs/mn/recruit/comp/05.jpg',
                name: '武汉糖涩餐饮管理有限公司',
                title: randInt(1, 5),
                info1: '湖北省-武汉市',
                info2: '门店',
                view: randInt(100, 50000)
              }], label: ['Logo', '公司名', '招聘人数', '城市', '工作形式']
          }
        ],

        ftTopItems: [
          [
            {text: '关于我们', url: ''},
            {text: '烘焙学院', url: ''},
            {text: '烘焙食谱', url: ''},
            {text: '分类信息', url: ''},
            {text: '求职招聘', url: ''},
            {text: '社区交流', url: ''}],
          [
            {text: '联系我们', url: ''},
            {text: '广告投放', url: ''},
            {text: '用户协议', url: ''},
            {text: '友情链接', url: ''},
            {text: '在线反馈', url: ''},
            {text: '我发投稿', url: ''}],
          [
            {text: 'Archiver', url: ''},
            {text: '手机版', url: ''},
            {text: '小黑屋', url: ''}]
        ],
        ftIconArr: [
          {
            url: '../imgs/ft/wx.png',
            text: '官方微信',
            QRCard: '../imgs/ft/qrwx.png',
            info1: '每天官微五分钟一年萌新变大神',
            info2: '扫码关注官方微信',
            color: '#04c15f'
          },
          {
            url: '../imgs/ft/wb.png',
            text: '新浪微博',
            QRCard: '../imgs/ft/qrwb.png',
            info1: '每天50篇设计干货30万设计师关注！',
            info2: '访问新浪微博',
            color: '#ee231c'
          },
          {
            url: '../imgs/ft/qq.png',
            text: '官方客服',
            QRCard: '../imgs/ft/qrwx.png',
            info1: '专业客服24h在线解答问题',
            info2: '扫码添加官方客服',
            color: '#2f85f5'
          },
        ],
        ftMidItems: [
          {url: '', text: '申请友情链接'}, {url: '', text: '烘焙馆'}, {url: '', text: '烘焙食谱'},
          {url: '', text: '烘焙网'}, {url: '', text: '可欣互动'}, {url: '', text: '特特美食网'},
          {url: '', text: '成都地暖公司'}, {url: '', text: '汽车排行榜'}, {url: '', text: '展厅设计'},
          {url: '', text: '灵芝孢子粉'}, {url: '', text: '重庆网'}, {url: '', text: '滋补养生'},
          {url: '', text: '学术论文投稿'}, {url: '', text: '玻璃钢管道'}, {url: '', text: '精酿啤酒'}]
      }
    },
    methods: {
      hdNavHandleSelect(key, keyPath) {
        v.hdTopNavActiveIndex = key
      },
      mnRecipeNavHandleSelect(key, keyPath) {
        v.mnRecipeActiveIndex = key
      },
      mnMvNavHandleSelect(key, keyPath) {
        v.mnMvActiveIndex = key
        console.log(key)
      },
      mnInfoNavHandleSelect(key, keyPath) {
        v.mnInfoActiveIndex = key
      },
      mnRecruitNavHandleSelect(key, keyPath) {
        v.mnRecruitNavActiveIndex = key
      },
    },
    watch: {}
  })
</script>
</html>